<template>
    <Card :dis-hover="true">
        <Row>
            <Col span="4">
 
                  <Breadcrumb>
                      <BreadcrumbItem ><Icon type="md-school"></Icon>{{parnetName}}</BreadcrumbItem>
                      <BreadcrumbItem >{{currentMenuName}}</BreadcrumbItem>

                  </Breadcrumb>
                <Tree :data="menuTree" :render="treeRender"></Tree>
            </Col>
            <Col span="20">
                <BaseTable ck op :columns="columns" :data="data"
                @add="addHandler" @update="updateHandler" @delete="deleteHandler"></BaseTable>
            </Col>
        </Row>
    </Card>
</template>
<script>
import moment from 'moment';
import { STATIS_HOST } from '@/api/config';
import BaseTable from '@c/table/table';
export default {
  name: 'CMSArticles',
  components: {
    BaseTable
  },
  computed: {},
  data () {
    return {
      data: [],
      columns: [
        {
          title: '标题',
          key: 'Name',
          width: 140,
          sortable: true,
          tooltip: true
        },
        {
          title: '作者',
          key: 'Author',
          width: 140,
          sortable: true,
          tooltip: true
        },
        {
          title: '来源',
          key: 'Source',
          width: 140,
          sortable: true
        },
        {
          title: '标签',
          key: 'Tags',
          width: 140,
          sortable: true,
          tooltip: true
        },
        {
          title: '状态',
          key: 'Status',
          render (h, { row, column, index }) {
            let str = '';
            let color = '';
            if (row.Status === 1) {
              str = '已发布';
              color = 'primary';
            } else {
              str = '废弃';
              color = 'default';
            }
            return h('Tag', { props: { color: color } }, str);
          }
        },
        {
          title: '发布人',
          key: 'Creater',
          sortable: true
        },
        {
          title: '发布时间',
          key: 'Ctime',
          sortable: true,
          render (h, { row, column, index }) {
            return h('span', String(row.Ctime).slice(0, 10));
          }
        },
        {
          title: '修改时间',
          key: 'Utime',
          sortable: true,
          render (h, { row, column, index }) {
            return h('span', String(row.Utime).slice(0, 10));
          }
        }
      ],
      menuTree: [],
      currentMenuId: '',
      currentMenuName: '',
      parnetName: ''
    };
  },
  watch: {
    currentMenuId: function (val) {
      this.getArticle(val);
    }  
  },
  methods: {
    getMenus () {
      this.$api.GetMenusList().then(res => {
        if (res.code === 0) {
          this.menuTree = res.Data;
          if (Array.isArray(this.menuTree) && this.menuTree.length > 0 &&
            Array.isArray(this.menuTree[0]['children']) && this.menuTree[0]['children'].length > 0) {
            // this.menuId = this.menuTree[0]['id'];
            // this.menuId = this.menuTree[0]['id'];
            this.parnetName = this.menuTree[0]['name'];
            this.currentMenuId = this.menuTree[0]['children'][0]['id'];
            this.currentMenuName = this.menuTree[0]['children'][0]['name'];
          }
        }
      }, err => {
        if (err) {
          this.$Message.error(err);
        }
      });
    },
    treeRender (h, { root, node, data }) {
      return h(
        'span',
        {
         
          style: {
            display: 'inline-block',
            width: '100%',
            cursor: 'pointer'
          },
          on: {
            click: (event) => {
              this.currentMenuId = data.id;
              this.currentMenuName = data.name;
            }
          }
        },
        [
          h('Icon', {
            props: {
              // type: data.icon ? data.icon : 'md-bookmarks'
              type: 'md-bookmarks'
            },
            style: {
              marginRight: '8px'
            }
          }),
          h('span', {}, data.name)
     
        ]
      );
    },
    getArticle (data) {
      this.$api.getArticleByMenu({ Id: data }).then(res => {
        if (res.code === 0) {
          this.data = res.Data;
        }
      });
    },
    addHandler () {
      this.$router.push({
        name: 'cms_editor',
        params: {
          menu_id: this.currentMenuId,
          addmode: true,
          editable: true
        }
      });
    },
    updateHandler (rows) {
      if (Array.isArray(rows) && rows.length === 1) {
        this.$router.push({
          name: 'cms_editor',
          params: {
            editable: true,
            addmode: false,
            menu_id: this.currentMenuId,
            row: rows[0]
          }
        });
      } else {
        this.$Message.info('请选择一条需要操作的数据！');
      }
    },
    deleteHandler (rows) {
      if (Array.isArray(rows) && rows.length === 1) {
        this.$Modal.confirm({
          title: '操作确认',
          content: '删除后可能会影响其它功能使用，确认删除选中的数据吗？',
          onOk: () => {
            this.$api.deleteArticle(rows[0]).then(res => {
              if (res.code === 0) {
                this.getArticle(this.currentMenuId);
                this.$Message.success('操作成功');
              }
            }, err => {
              if (err) {
                this.getArticle(this.currentMenuId);
                this.$Message.success(err);
              }
            });
          }
        });
      } else {
        this.$Message.info('请选择一条需要操作的数据！');
      }
    }
  },
  mounted () {
    this.getMenus();
  }
};
</script>
<style scoped>

</style>


